<template>
  <div>
    <el-divider content-position="left">模版设置</el-divider>
    <el-table :data="exportJson" height="67vh" row-key="id" border stripe style="width: 100%">
      <!-- <el-table-column type="expand">
        <template #default="scope">
          <el-form :inline="true" size="small" :model="scope" class="demo-form-inline">
            <span v-if="scope.row.isShow">
              <el-form-item label="必填">
                <el-switch size="small" v-model="scope.row.rule.required" />
              </el-form-item>
            </span>
          </el-form>
        </template>
      </el-table-column> -->
      <el-table-column label="关联网格字段" width="230" prop="type">
        <template #default="scope">
          <el-select
            v-model="scope.row.gridField"
            filterable
            @change="selectField($event, scope.row)"
            placeholder="未关联"
            size="small"
          >
            <el-option
              v-for="item in fieldJsonCopy"
              :key="item.field"
              :label="item.label"
              :value="item.field"
              :disabled="item.disabled"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
                {{ item.field }}
              </span></el-option
            >
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="启用"
        prop="isShow"
        width="70"
        :filters="[
          { text: '显示', value: true },
          { text: '隐藏', value: false }
        ]"
        :filter-method="filterHandler"
      >
        <template #default="scope">
          <el-switch size="small" v-model="scope.row.isShow" />
        </template>
      </el-table-column>
      <el-table-column label="别名" prop="name">
        <template #default="scope">
          <el-input v-model="scope.row.alias" size="small" clearable />
        </template>
      </el-table-column>
      <el-table-column label="字段名" prop="field">
        <template #default="scope">
          <el-input
            v-model="scope.row.field"
            :disabled="!!scope.row.gridField"
            size="small"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="170" prop="isSort">
        <template #default="scope">
          <OperationView v-model="exportJson" :scope />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import OperationView from './OperationView.vue'
import { ref } from 'vue'
// 字段配置列表
const props = defineProps(['fieldJson'])
// 解除与 fieldJson 双向绑定，改为单向
const fieldJsonCopy = ref(JSON.parse(JSON.stringify(props.fieldJson)))
const exportJson = defineModel({ default: [] })
// const exportJson = [
//     {
//       isShow: true,
//       field: 'default',
//       alias: '别名',
//       gridField: null // 绑定网格字段
//     }
// ]

// 初始化一些数据
load()
function load() {
  // 已选择的关联字段标记为不可选
  exportJson.value.forEach((item) => {
    fieldJsonCopy.value.forEach((item2) => {
      if (item.field === item2.field) {
        item2.disabled = true
      }
    })
  })
}

function selectField(selectfield, field) {
  fieldJsonCopy.value.forEach((item) => {
    if (item.field === selectfield) {
      // 该字段标记为不可选
      item.disabled = true
      // 释放原绑定对象网格字段为可选
      if (field.gridField) {
        fieldJsonCopy.value.forEach((item2) => {
          if (item2.field === field.field) {
            item2.disabled = false
          }
        })
      }
      // 配置同步网格字段
      field.field = item.field
      field.alias = item.label
    }
  })
}
// 过滤字段
function filterHandler(value, row, column) {
  return row.isShow === value
}
</script>
<style scoped>
.el-form {
  margin: 0px 10px;
}
:deep(.el-table__expanded-cell) {
  background-color: hsl(0, 0%, 95%) !important;
}
</style>
